
<script setup lang="ts">
import Layout from '@/components/Form/Layout.vue'
import XInput from '@/components/Form/XInput.vue'
import XGraphicCaptcha from '@/components/Form/XGraphicCaptcha.vue'
import XCaptcha from '@/components/Form/XCaptcha.vue'
import XButton from '@/components/Form/XButton.vue'
import { loginWithCode } from '@/api/user'
import type { XCaptchaMethod } from '@/typings/components'

const formData = $ref({
  code: '', // 短信验证码
  send: false, // 是否发送短信验证码
  account: '', // ⽤户账号
  accept: false, // 是否同意协议
  graphicCaptcha: '' // 图形验证码
})
const { base, success } = useToast()
const { switchLoginState } = $(useUser())
const xCaptcha = $ref<XCaptchaMethod>()

const login = async () => {
  const { code, msg, data } = (await loginWithCode({
    code: formData.code,
    phone: formData.account
  }))
  if (code !== 0) {
    base(msg || '登录失败！')
    formData.graphicCaptcha = ''
    xCaptcha?.changeCaptcha()
  } else {
    success(msg || '登录成功！')
    switchLoginState(data)
  }
}

</script>
<template>
  <Layout v-model="formData.accept" title="验证码登录">
    <view mt-10>
      <XInput v-model="formData.account" placeholder="请输入手机号" />
    </view>
    <!--手机验证码-->
    <view m="t-5 b-3">
      <XGraphicCaptcha ref="xCaptcha" v-model="formData.graphicCaptcha" type="login" />
    </view>
    <!-- 短信验证码 -->
    <view m="t-5 b-3">
      <XCaptcha v-model:send="formData.send" v-model="formData.code" type="login" :form-data="formData" />
    </view>
    <!-- 登录 -->
    <view my-5>
      <XButton :form-data="formData" @click="login">
        立即登录
      </XButton>
    </view>
    <navigator text="30 #555555" url="/pages/login/password" hover-class="text-blue transition">
      密码登录
    </navigator>
  </Layout>
</template>



<style></style>
